﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>湖南省</title>
</head>
<style>
  .highcharts-credits {
    display: none;
  }
  .highcharts-legend {
    display: none;
  }
</style>
<body><div id="map" style="width:800px;height: 500px;"></div>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://data.jianshukeji.com/geochina/hubei.js"></script>
<script>
// 随机数据
var data = [{"name":"武汉","value":42},{"name":"黄石","value":81},{"name":"十堰","value":94},{"name":"宜昌","value":8},{"name":"襄阳","value":67},{"name":"鄂州","value":38},{"name":"荆门","value":7},{"name":"孝感","value":9},{"name":"荆州","value":77},{"name":"黄冈","value":78},{"name":"咸宁","value":17},{"name":"随州","value":83},{"name":"恩施","value":23},{"name":"仙桃","value":75},{"name":"潜江","value":65},{"name":"天门","value":13},{"name":"神农架","value":92}];
// 初始化图表
var map = new Highcharts.Map('map', {
  title: {
    text: '湖北省'
  },
  colorAxis: {
    min: 0,
    minColor: 'rgb(255,255,255)',
    maxColor: '#006cee'
  },
  series: [{
    data: data,
    name: '随机数据',
    mapData: Highcharts.maps['cn/hunan'],
    joinBy: 'name', // 根据 name 属性进行关联
    states: {
			hover: {
				color: '#000'
			}
		},
    dataLabels: {
			enabled: true,
			format: '{point.name}'
		}
  }]
});
</script></body></html>